<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Backbone tests</title>

	<!-- Used to get resourceUrl for inclusion in resource URLs below -->
	<spring:eval expression="@applicationProps['application.version']" var="applicationVersion"/>
	<spring:url value="/resources-{applicationVersion}" var="resourceUrl">
    	<spring:param name="applicationVersion" value="${applicationVersion}"/>
	</spring:url>

	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<link rel="stylesheet" type="text/css" href="${resourceUrl}/content/layout.css" media="all" />
</head>
<body>

	<div class="section-container">
		<div>
			<textarea rows="10" cols="40" id="txtOutput"></textarea>
		</div>
		<div>
			<input type="button" id="btnCheckSpeed" value="Check Speed"/>
		</div>
	</div>
	
	<div style="height: 20px"></div>
	
	<input type="button" id="btnGetList" value="Get List"/>
	<div class="section-container" id="laneListSection">
	</div>
	
	<div style="height: 20px"></div>
	<div class="section-container" id="laneEditSection">
	</div>

	<script type="application/javascript" src="${resourceUrl}/scripts/jquery-1.8.2.js"></script>
	<script type="application/javascript" src="${resourceUrl}/scripts/jquery.toobject.js"></script>
	<script type="application/javascript" src="${resourceUrl}/scripts/underscore-min.js"></script>
	<script type="application/javascript" src="${resourceUrl}/scripts/backbone.js"></script>
	<script type="application/javascript" src="${resourceUrl}/scripts/utils.js"></script>
	<script type="application/javascript" src="${resourceUrl}/scripts/bbmain.js"></script>
	
	<!-- templates -->
	<script type="text/template" id="lane_list_template">
		<@ _.each(lanes, function(lc) { @> 
			<li><@=lc.attributes.lane @> - <@=lc.attributes.start @> : <@=lc.attributes.end @></li> 
		<@ }); @>
	</script>
	
	<script type="text/template" id="lane_edit_template">
  		<div><label>Name:</label><input type="text" name="lane" value="<@=lane @>" /></div>
		<div><label>Start:</label><input type="text" name="start" value="<@=start @>" /></div>
		<div><label>End:</label><input type="text" name="end" value="<@=end @>" /></div>
  		<div><input type="button" name="btnSave" value="Save" /></div>
	</script>
	
</body>
</html>